<template>
  <div class="edit">
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.go(-1)" />
    <div class="img-item">
      <van-image
        round
        width="120px"
        height="120px"
        fit="cover"
        :src="userInfo.photo"
      />
      <!-- 文件上传 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <div class="cell-item">
      <van-cell-group>
        <van-cell
          title="名称"
          :value="userInfo.name"
          is-link
          @click="setUserClick"
        />
        <van-cell
          title="性别"
          :value="userInfo.gender ? '男' : '女'"
          is-link
          @click="isShow = true"
        />
        <van-cell
          title="生日"
          :value="userInfo.birthday"
          is-link
          @click="showDatePick = true"
        />
      </van-cell-group>

      <!-- 编辑资料弹框 -->
      <van-dialog
        v-model="showDialog"
        title="修改昵称"
        show-cancel-button
        @confirm="updataName"
      >
        <van-field
          ref="name"
          placeholder="请输入昵称"
          v-model="newName"
        ></van-field>
      </van-dialog>

      <!-- 编辑性别 -->
      <van-popup v-model="isShow" position="bottom" :style="{ height: '15%' }">
        <van-nav-bar title="修改性别" left-arrow @click-left="isShow = false" />
        <van-cell is-link title="男" @click="setSex(1)" />
        <van-cell is-link title="女" @click="setSex(0)" />
      </van-popup>

      <!-- 编辑日期 -->
      <van-popup position="bottom" v-model="showDatePick">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showDatePick = false"
          @confirm="commitDate"
        />
      </van-popup>

      <!-- // 图片裁剪盒子 -->
      <div class="cropper-box" v-show="showCropper">
        <vueCropper
          ref="cropper"
          autoCropWidth="120"
          autoCropHeight="120"
          autoCrop
          :img="img"
        ></vueCropper>
        <van-button type="primary" @click="croClick" class="confirm-btn"
          >确认</van-button
        >
        <van-button type="info" class="cancel-btn" @click="showCropper = false"
          >取消</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { editUserInfo, editFomeDate } from "../user/user.js";
import moment from "moment";
// 图片裁剪
import { VueCropper } from "vue-cropper";
export default {
  name: "edit",
  data() {
    return {
      showDialog: false,
      newName: "",
      isShow: false,
      isShowPop: false, // 性别
      showDatePick: false, // 日期
      currentDate: new Date(), // 当前选中日期
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2030, 0, 1),
      showCropper: false, // 裁剪图片的窗口
      img: "", // 图片裁剪
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    setUserClick() {
      this.showDialog = true;
      this.newName = this.userInfo.name;
      // 输入框自动聚焦
      // vue渲染数据是异步的,因此无法获取输入框 $nextTick这个方法相当与高级定时器,会等待vue渲染完成执行
      this.$nextTick(() => this.$refs.name.focus());
    },

    // 修改名字
    updataName() {
      editUserInfo({ name: this.newName }).then((res) => {
        this.$toast.success("更新成功!");
        //(2)更新vuex数据
        this.$store.commit("setUserInfo", {
          ...this.userInfo,
          name: res.data.data.name,
        });
      });
    },

    // 修改性别
    setSex(gender) {
      editUserInfo({ gender }).then((res) => {
        console.log(res);
        this.$toast.success("更新成功");
        // 跟新vuex中的数据
        this.$store.commit("setUserInfo", {
          ...this.userInfo,
          gender: gender,
        });
        this.isShow = false;
      });
    },

    // 修改日期
    commitDate() {
      let birthday = moment(this.currentDate).format("YYYY-MM-DD");
      editUserInfo({ birthday }).then((res) => {
        // console.log(res);
        this.$toast.success("更新成功");
        this.$store.commit("setUserInfo", {
          ...this.userInfo,
          birthday: res.data.data.birthday,
        });
        // 关闭窗口
        this.showDatePick = false;
      });
    },

    // 上传头像
    afterRead(file) {
      this.img = file.content;
      this.showCropper = true;
    },
    croClick() {
      this.$refs.cropper.getCropBlob((blob) => {
        let fd = new FormData();
        // console.log(file);
        fd.append("photo", blob);
        editFomeDate(fd).then((res) => {
          this.$toast.success("更新成功");
          this.$store.commit("setUserInfo", {
            ...this.userInfo,
            photo: res.data.data.photo,
          });
          this.showCropper = false;
        });
      });
    },
  },
  components: {
    VueCropper,
  },
};
</script>

<style lang="less">
.edit {
  .van-nav-bar {
    background-color: #0098fa;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .img-item {
    text-align: center;
    margin: 20px 0;
  }
  .van-uploader {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    .van-uploader__upload {
      width: 120px;
      height: 120px;
    }
  }
  .cropper-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .confirm-btn {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .cancel-btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
